﻿﻿<!DOCTYPE HTML>
<html>
<head>
<title>Gaming Blog Bootstarp Website Template | Features</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
</head>
<style> 
        .heart-container {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            gap: 4px;
            max-width: 800px;
            width: 100%;
			margin: 0 auto;
        }
        
        .heart-item {
            aspect-ratio: 1/1;
            border-radius: 8px;
            overflow: hidden;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
        }
        
        .heart-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        /* 小屏幕适配 */
        @media (max-width: 500px) {
            .heart-container {
                gap: 2px;
            }
            .heart-item {
                border-radius: 4px;
            }
        }
    </style>
<body>
<!-- Header Starts Here -->
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.html"><img src="images/logo.png" alt=""></a>
		</div>
		<span class="menu"></span>
		<div class="navigation">
			<ul class="navig cl-effect-3" >
				<li><a href="index.html">主页</a></li>
				<li><a href="games.html">抽奖</a></li>
				<li><a href="blog.html">鸡蛋动画</a></li>
				<li><a href="features.html">爱心照片墙</a></li>
			</ul>
			<div class="search-bar">
					<input type="text" placeholder="搜索" required="" />
					<input type="submit" value="" />
			</div>
			<script>
				$( "span.menu" ).click(function() {
				  $( ".navigation" ).slideToggle( "slow", function() {
				    // Animation complete.
				  });
				});
			</script>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- Header Ends Here -->
<!-- Games Page Starts here -->
<div class="games">
	<div class="container">
		<div class="heart-container">
		    <!-- 第1行 -->
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    
		    <!-- 第2行 -->
		    <div class="heart-item"></div>
		    <div class="heart-item"><img src="beng/23.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/23.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/23.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/23.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/23.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/23.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/23.png" alt="爱心图片"></div>
		    <div class="heart-item"></div>
		    
		    <!-- 第3行 -->
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    
		    <!-- 第4行 -->
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/3.png" alt="爱心图片"></div>
		    
		    <!-- 第5行 -->
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    
		    <!-- 第6行 -->
		    <div class="heart-item"></div>
		    <div class="heart-item"><img src="beng/9(1).jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/9(1).jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/9(1).jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/9(1).jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/9(1).jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/9(1).jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/9(1).jpg" alt="爱心图片"></div>
		    <div class="heart-item"></div>
		    
		    <!-- 第7行 -->
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"><img src="beng/69.jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/69.jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/69.jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/69.jpg" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/69.jpg" alt="爱心图片"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    
		    <!-- 第8行 -->
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    
		    <!-- 第9行 -->
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"><img src="beng/2.png" alt="爱心图片"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		    <div class="heart-item"></div>
		</div>
	</div>
</div>
<!-- What New Part Endss Here -->

<!-- Footer Starts Here -->
<div class="footer">
	<div class="container">
		<ul class="social">
			<li><i class="fa"></i></li>
			<li><i class="fb"></i></li>
			<li><i class="fc"></i></li>
		</ul>
	</div>
	
</div>
<!-- Footer Ends Here -->
</body>
</html>
